<template>
  <el-dialog :visible.sync="showDialog" title="查看进度" class="progress-dia">
    <div class="progress" v-loading="loading">
      <div class="empty" v-if="!loading && progressInfo == null">
        数据查询失败
      </div>
      <!-- 进度详情 -->
      <div class="details" v-if="progressInfo != null">
        <div class="applyment-info">
          <div class="applyment-name">
            <div class="name">
              微信商户名称<span>{{ progressInfo.name }}</span>
            </div>
            <div class="status">
              申请单状态
              <span
                :class="{
                  success: progressInfo.status == 6,
                  error: progressInfo.status == 3
                }"
                >{{ progressInfo.status | $value2label(statusList) }}</span
              >
            </div>
          </div>
          <div class="applyment-info-list">
            <div>
              更新时间：<span>{{ progressInfo.updateTime }}</span>
            </div>
            <div>
              微信支付申请单号：<span>{{
                progressInfo.applymentId || '未生成'
              }}</span>
            </div>
            <div>
              微信商户号：<span>{{ progressInfo.payMchId || '未生成' }}</span>
            </div>
          </div>
        </div>

        <el-timeline>
          <el-timeline-item
            :hide-timestamp="true"
            placement="top"
            :color="isTrue(pState[0]) ? '#13ce66' : ''"
            :icon="isTrue(pState[0]) ? 'el-icon-circle-check' : ''"
          >
            <div class="progress-item" :class="{ active: isTrue(pState[0]) }">
              <div class="title">
                提交资料
                <span class="link" @click="lookDetails">查看申请资料</span>
              </div>
              <div class="describe">提交时间：{{ progressInfo.applyTime }}</div>
            </div>
          </el-timeline-item>

          <el-timeline-item
            :hide-timestamp="true"
            placement="top"
            :color="isTrue(pState[1]) ? '#13ce66' : ''"
            :icon="isTrue(pState[1]) ? 'el-icon-circle-check' : ''"
          >
            <div class="progress-item" :class="{ active: isTrue(pState[1]) }">
              <div class="title">资料检验</div>

              <!-- 当资料进入审核状态时，代表资料检验通过 -->
              <div class="describe" v-if="progressInfo.status == 1">
                资料检验中
              </div>
              <div class="describe success" v-else-if="isTrue(pState[2])">
                检验通过
              </div>
            </div>
          </el-timeline-item>

          <!-- 账户验证状态可能不会出现 -->
          <el-timeline-item
            v-if="progressInfo.status == 4"
            :hide-timestamp="true"
            placement="top"
          >
            <div
              class="progress-item"
              :class="{ active: progressInfo.status == 4 }"
            >
              <div class="title">账户验证</div>
              <div class="describe">
                <!-- 验证步骤信息 -->
                <div class="situation" v-if="progressInfo.accountValidation">
                  <div>情况一</div>
                  <div>
                    需商户采用付款账户名为
                    <span
                      >【{{
                        progressInfo.accountValidation.accountName
                      }}】</span
                    >
                    的账户进行汇款，请在
                    <span
                      >【{{ progressInfo.accountValidation.deadline }}】</span
                    >
                    前完成汇款操作，相关信息如下：
                  </div>
                  <div>付款账户信息：</div>
                  <div style="padding-left: 20px; background: #eee;">
                    <div>
                      账户名：<span>{{
                        progressInfo.accountValidation.accountName
                      }}</span>
                    </div>
                    <div>
                      付款卡号：<span>{{
                        progressInfo.accountValidation.accountNo || row.applymentJson.accountInfo.accountNumber
                      }}</span>
                    </div>
                    <div v-if="progressInfo.accountValidation.payAmount">
                      付款金额：<span>{{
                        progressInfo.accountValidation.payAmount / 100
                      }}</span>
                    </div>
                  </div>
                  <div>收款账户信息：</div>
                  <div style="padding-left: 20px; background: #eee;">
                    <div>
                      收款用户名：<span>{{
                        progressInfo.accountValidation.destinationAccountName
                      }}</span>
                    </div>
                    <div>
                      收款卡号：<span>{{
                        progressInfo.accountValidation.destinationAccountNumber
                      }}</span>
                    </div>
                    <div>
                      收款账户开户银行：<span>{{
                        progressInfo.accountValidation.destinationAccountBank
                      }}</span>
                    </div>
                    <div>
                      开户账户省市：<span>{{
                        progressInfo.accountValidation.city
                      }}</span>
                    </div>
                  </div>
                  <div>汇款时请填写备注信息：<span>入驻账户验证</span></div>
                </div>

                <div class="situation" v-if="progressInfo.legalValidationUrl">
                  <div>
                    情况{{
                      progressInfo.accountValidation ? '二' : '一'
                    }}：当通过系统验证时，生成法人验证二维码
                  </div>
                  <PicViewer :value="progressInfo.legalValidationUrl" qrcode />
                </div>
              </div>
            </div>
          </el-timeline-item>

          <el-timeline-item
            :hide-timestamp="true"
            placement="top"
            :color="isTrue(pState[3]) ? '#13ce66' : ''"
            :icon="isTrue(pState[3]) ? 'el-icon-circle-check' : ''"
          >
            <div class="progress-item" :class="{ active: isTrue(pState[3]) }">
              <div class="title">资料审核</div>
              <div class="describe">
                <div v-if="progressInfo.status == 2">审核中</div>
                <div v-else-if="isTrue(pState[3])" class="success">
                  审核通过
                </div>
                <!-- 驳回 -->
                <div v-else-if="progressInfo.status == 3">
                  <div>已驳回</div>
                  <div class="refuse">
                    驳回原因：
                    <template v-if="progressInfo.auditDetail">
                      <div
                        v-for="(item, index) in progressInfo.auditDetail"
                        :key="index"
                      >
                        {{ item.rejectReason }}
                      </div>
                    </template>
                  </div>
                </div>
                <!-- 冻结 -->
                <div v-else-if="progressInfo.status == 7">
                  <div>已冻结</div>
                  <div class="refuse">
                    冻结原因：
                    <template v-if="progressInfo.auditDetail">
                      <div
                        v-for="(item, index) in progressInfo.auditDetail"
                        :key="index"
                      >
                        {{ item.rejectReason }}
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </el-timeline-item>

          <el-timeline-item
            :hide-timestamp="true"
            placement="top"
            :color="isTrue(pState[4]) ? '#13ce66' : ''"
            :icon="isTrue(pState[4]) ? 'el-icon-circle-check' : ''"
          >
            <div class="progress-item" :class="{ active: isTrue(pState[4]) }">
              <div class="title">商户签约</div>
              <div class="describe" v-if="progressInfo.status == 5">
                <div>待签约</div>
                <div v-if="progressInfo.signUrl">
                  <div style="line-height: 25px;">
                    需申请单中的超级管理者，采用<b>已实名</b>认证的微信扫码打开，完成签约
                  </div>
                  <PicViewer :value="progressInfo.signUrl" qrcode />
                </div>
              </div>
              <div class="describe success" v-if="isTrue(pState[4])">
                已签约
              </div>
            </div>
          </el-timeline-item>
          <el-timeline-item
            :hide-timestamp="true"
            placement="top"
            :color="isTrue(pState[5]) ? '#13ce66' : ''"
            :icon="isTrue(pState[5]) ? 'el-icon-circle-check' : ''"
          >
            <div class="progress-item" :class="{ active: isTrue(pState[5]) }">
              <div class="title">已完成</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import StatusFilter from './StatusFilter'

// '待提交': 0
// '资料校验中': 1
// '审核中': 2
// '已驳回': 3
// '待账户验证': 4
// '待签约': 5
// '已完成': 6
// '冻结': 7
// 构建进度状态对应表
export default {
  name: 'Progress',
  data () {
    return {
      pState: [
        [1, 2, 3, 4, 5, 6, 7], // 提交资料
        [2, 3, 4, 5, 6, 7], // 资料检验
        [2, 3, 5, 6, 7], // 账户验证
        [5, 6], // 资料审核通过
        [6], // 商户签约
        [6] // 已完成
      ],
      showDialog: false,
      loading: true,
      progressInfo: null,
      row: null,
      statusList: StatusFilter.statusList
    }
  },
  methods: {
    show (row) {
      this.progressInfo = null
      this.showDialog = true
      this.loading = true
      this.row = row
      this.$POST('/sot-admin-api/merchant/applyment/queryApplyStatus', { id: row.id })
        .then(({data}) => {
          this.progressInfo = data
        })
        .finally(_ => {
          this.loading = false
        })
    },
    lookDetails () {
      this.$parent.r(this.row)
    },
    isTrue (status) {
      return status.includes(this.progressInfo.status)
    }
  }
}
</script>
<style lang="scss" scoped>
.progress {
  min-height: 200px;
  .empty {
    text-align: center;
    line-height: 200px;
    font-size: 16px;
  }
  .applyment-info {
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #f6f6f6;
    .applyment-name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      span {
        font-size: 16px;
        font-weight: 600;
        margin-left: 10px;
        &.success {
          color: #13ce66;
        }
        &.error {
          color: #ff4949;
        }
      }
    }
    .applyment-info-list {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      span {
        color: #999;
      }
    }
  }
  .progress-item {
    padding-bottom: 10px;
    opacity: 0.8;
    .title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      .link {
        font-size: 14px;
        padding-left: 6px;
        color: #1890ff;
        font-weight: normal;
        cursor: pointer;
      }
    }
    .describe {
      display: block;
      color: #666;
      .situation {
        margin-bottom: 10px;
        div {
          line-height: 25px;
          span {
            font-weight: bold;
            color: #000;
          }
        }
      }
    }
    &.active {
      opacity: 1;
    }
    .success {
      color: #13ce66;
    }
    .error {
      color: #ff4949;
    }
    .refuse {
      margin-top: 10px;
      & > div {
        color: #ff4949;
        padding-left: 10px;
        margin-top: 6px;
      }
    }
  }
}
</style>
<style lang="scss">
.progress-dia {
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
  .el-timeline-item__node {
    transform: scale(1.5);
  }
}
</style>
